<template>
  <view class="order-detail-page">
    <TopBar
      left-icon="/static/user.png"
      scan-icon="/static/saoyisao.png"
      menu-icon="/static/menu.png"
      @menu="toggleMenu"
    />

    <scroll-view scroll-y class="form-scroll">
      <!-- 返回箭头 -->
      <view class="back-row" @click="goBack">
        <image
          class="back-arrow-icon"
          src="/static/left.png"
          mode="aspectFit"
        />
      </view>

      <!-- 搜索框 -->
      <view class="search-box">
        <image src="/static/search.png" class="search-icon" />
        <input class="search-input" placeholder="Value" />
      </view>

      <!-- 标题与信息卡片 -->
      <text class="section-title">QR code & Passport</text>
      <view class="info-card">
        <text class="info-code">VA7585241</text>
        <text class="info-date">23/09/2025</text>
      </view>

      <!-- 商品列表：8个卡片 -->
      <view class="product-list">
        <view class="product-card" v-for="(item, index) in products" :key="index">
          <view class="product-main">
            <image :src="item.image" class="product-image" mode="aspectFit" />
            <view class="product-info">
              <text class="product-code">{{ item.code }}</text>
              <text class="product-name">{{ item.name }}</text>
              <text class="product-units">{{ item.units }} units</text>
            </view>
          </view>
          <view class="product-action">
            <text class="action-btn" @click="viewQRCode(item)">View QR Code</text>
          </view>
        </view>
      </view>

      <!-- 底部操作按钮 -->
      <view class="action-buttons">
        <view class="action-btn-large left" @click="createQRCodeBox">
          <image src="/static/allOrders/Codesandbox.png" class="btn-icon" mode="aspectFit" />
          <text class="btn-text">Create QR Code</text>
        </view>
        <view class="action-btn-large right" @click="createQRCodeTruck">
          <image src="/static/allOrders/Truck.png" class="btn-icon" mode="aspectFit" />
          <text class="btn-text">Create QR Code</text>
        </view>
      </view>
    </scroll-view>

    <CustomTabbar active="import" />

    <AccountMenu
      v-if="showMenu"
      :style="{ '--anchor-top': '70px', '--anchor-right': '0px' }"
      @close="closeMenu"
      @select="closeMenu"
    />
  </view>
</template>

<script setup>
import { ref } from "vue";
import TopBar from "@/components/TopBar.vue";
import AccountMenu from "@/components/AccountMenu.vue";
import CustomTabbar from "@/components/CustomTabbar.vue";

const showMenu = ref(false);
const toggleMenu = () => {
  showMenu.value = !showMenu.value;
};
const closeMenu = () => {
  showMenu.value = false;
};
const goBack = () => {
  uni.navigateTo({ url: '/pages/brand/all-orders' });
};

// 商品列表数据（8个）
const products = ref([
  { code: '46DC85241', name: 'T shirt', units: 100, image: '/static/record/type1.png' },
  { code: '46DC85242', name: 'T shirt', units: 50, image: '/static/record/type2.png' },
  { code: '46DC85243', name: 'T shirt', units: 100, image: '/static/record/type3.png' },
  { code: '46DC85244', name: 'T shirt', units: 100, image: '/static/record/type4.png' },
  { code: '36DC76542', name: 'T shirt', units: 100, image: '/static/record/type5.png' },
  { code: '36DC76542', name: 'T shirt', units: 50, image: '/static/record/type6.png' },
  // { code: '36DC76543', name: 'T shirt', units: 80, image: '/static/record/type1.png' },
  // { code: '36DC76544', name: 'T shirt', units: 120, image: '/static/record/type2.png' }
]);

const viewQRCode = (item) => {
  // 点击不做任何操作
};

const createQRCodeBox = () => {
  // 跳转到生产二维码页面
  uni.navigateTo({ url: '/pages/brand/qr-production' });
};

const createQRCodeTruck = () => {
  // 跳转到配送页面
  uni.navigateTo({ url: '/pages/brand/distribution' });
};
</script>

<style lang="scss">
.order-detail-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #d9f0ff 0%, #e9f9ed 100%);
}
.form-scroll {
  margin-top: 60px;
  padding: 0 16px 84px 16px;
  box-sizing: border-box;
}
.back-row {
  margin: 12px 0 0 -8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-arrow-icon {
  width: 24px;
  height: 24px;
}

.search-box {
  height: 44px;
  background: #fff;
  border-radius: 24px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-top: 8px;
}
.search-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.search-input {
  flex: 1;
  text-align: left;
  font-size: 14px;
  color: #333;
}

.section-title {
  display: block;
  margin: 18px 4px 10px;
  font-size: 18px;
  font-weight: 800;
  color: #0b1e2a;
}
.info-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #eaf6ff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  margin: 0 4px 18px;
}
.info-code {
  color: #0b1e2a;
  font-size: 14px;
  font-weight: 600;
}
.info-date {
  color: #0b1e2a;
  font-size: 12px;
  opacity: .9;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.product-card {
  background: #e7f5f7;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.product-main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.product-image {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: #fff;
  flex-shrink: 0;
}
.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.product-code {
  font-size: 14px;
  font-weight: 700;
  color: #0b1e2a;
}
.product-name {
  font-size: 13px;
  color: #0b1e2a;
}
.product-units {
  font-size: 12px;
  color: #0b1e2a;
  font-weight: 600;
}
.product-action {
  display: flex;
  justify-content: center;
  width: 100%;
}
.action-btn {
  background: #23323a;
  color: #fff;
  border-radius: 8px;
  padding: 4px 20px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  width: 100%;
  max-width: 120px;
  line-height: 1.2;
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin: 24px 0 32px;
}
.action-btn-large {
  flex: 1;
  background: #23323a;
  color: #fff;
  border-radius: 12px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.btn-icon {
  width: 28px;
  height: 28px;
}
.btn-text {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.1;
}
</style>
